import React, {useEffect, useState} from 'react';
import {Button} from "antd";

export default function UseEffectFun() {
    const [count,setCount]=useState(0)
    const [num,setNum]=useState(0)

    // 使用useEffect可以实现类式组件
    // 如果第二个参数为[]则只在第一次render时执行 所有状态改变其一就执行 也可以监听某个特定的状态值
    // return返回的是在组件销毁时的生命周期
    //componentDidMount()
    //componentDidUpdate()
    //componentWillUnmount()
    useEffect(()=>{
        console.log(num)
        return ()=>{
            console.log('组件销毁了')
        }
    },[count])

   function changeState(flag){
        flag==='num'?setNum(num+1):setCount(count+1)
   }

    return (
        <div>
            <h2>使用useEffective获取生命周期</h2>
            <span>num:{num}&nbsp;&nbsp;count:{count}</span>
            <Button onClick={()=>changeState('count')}>点我加count</Button>
            <Button onClick={()=>changeState('num')}>点我加num</Button>
        </div>
    );
}

